import { Modal } from 'antd';
import React, { useState } from 'react';

import { findByOrderDetailList } from '@/services/order';
import { defaultPagination } from '@/utils/util';
import { ProDescriptions } from '@ant-design/pro-descriptions';
import ProTable from '@ant-design/pro-table';
import { useRequest } from 'ahooks';

interface Props {
  id?: number | undefined;
  row: any | undefined;
}

const columns = [
  {
    title: '下单人员',
    key: 'userName',
    dataIndex: 'userName',
  },
  {
    title: '手机号',
    key: 'phone',
    dataIndex: 'phone',
  },
  {
    title: '订单号',
    key: 'sn',
    dataIndex: 'sn',
  },
  {
    title: '第三方订单',
    key: 'partySn',
    dataIndex: 'partySn',
  },
  {
    title: '支付方式',
    key: 'paymentMethod',
    dataIndex: 'paymentMethod',
  },
  {
    title: '支付状态',
    key: 'paymentStatus',
    dataIndex: 'paymentStatus',
  },
  {
    title: '支付金额',
    key: 'paymentAmount',
    dataIndex: 'paymentAmount',
    valueType: 'money',
  },
  /*  {
    title: "优惠金额",
    key: "discountAmount",
    dataIndex: "discountAmount",
    valueType: 'money',
  }, {
    title: "支付总额",
    key: "totalAmount",
    dataIndex: "totalAmount",
    valueType: 'money',
  },*/
  {
    title: '产品总数',
    key: 'quantity',
    dataIndex: 'quantity',
  },
  {
    title: '支付时间',
    key: 'paymentDate',
    dataIndex: 'paymentDate',
    valueType: 'dateTime',
  },
  {
    title: '订单时间',
    key: 'createDate',
    dataIndex: 'createDate',
    valueType: 'dateTime',
  },
  {
    title: '操作人员',
    key: 'operatorName',
    dataIndex: 'operatorName',
  },
  {
    title: '地址',
    key: 'address',
    dataIndex: 'address',
  },
];

const columnsTable = [
  {
    title: '图片',
    key: 'image',
    dataIndex: 'image',
    valueType: 'image',
  },
  {
    title: '名称',
    key: 'goodsName',
    dataIndex: 'goodsName',
  },
  {
    title: '单价',
    key: 'price',
    dataIndex: 'price',
  },
  {
    title: '支付金额',
    key: 'paymentAmount',
    dataIndex: 'paymentAmount',
    valueType: 'money',
  },
  {
    title: '产品总数',
    key: 'quantity',
    dataIndex: 'quantity',
  },
  {
    title: '订单时间',
    key: 'createDate',
    dataIndex: 'createDate',
    valueType: 'dateTime',
  },
];
const OrderShow: React.FC<Props> = (props) => {
  const { id, row } = props;
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    fetchByOrderDetailList(id);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //findByOrderDetailList
  // @ts-ignore
  const [pagination, setPagination] =
    useState<API.Pagination>(defaultPagination());
  const {
    run: fetchByOrderDetailList,

    data: dataList,
    loading,
  } = useRequest(findByOrderDetailList, {
    debounceWait: 100,
    manual: true,
  });

  // @ts-ignore
  return (
    <>
      <a onClick={showModal}>详细</a>
      <Modal
        footer={null}
        width={900}
        title={row.userName}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <ProDescriptions dataSource={row} columns={columns}></ProDescriptions>
        <ProTable
          toolBarRender={false}
          pagination={false}
          search={false}
          dataSource={dataList}
          loading={loading}
          cardBordered={true}
          columns={columnsTable}
        />
      </Modal>
    </>
  );
};

export default OrderShow;
